<template>
 <div class="box">
  <div class="font-600">
    學生資料報表
  </div>
  <div style="min-width: 1200px;" v-cloak class="mt-[30px]">
    <el-form ref="ruleFormRef" label-width="80px" :model="fromData">
      <el-form-item label="分校" prop="school_id">
        <el-select v-model="fromData.school_id"  placeholder="請選擇" @focus="getSchool">
          <el-option v-for="item in schoolData" :label="item.name" :key="item.id" :value="item.id"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="狀態" prop="status">
        <el-select v-model="fromData.status" placeholder="請選擇">
          <el-option label="現有" value="1"></el-option>
          <el-option label="過往" value="-1"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="類別" prop="type">
        <el-select v-model="fromData.type" placeholder="請選擇" @focus="getCategory">
          <el-option v-for="item in categoryData" :label="item.name" :key="item.id" :value="item.id"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="性別" prop="sex">
        <el-select v-model="fromData.sex" placeholder="請選擇">
          <el-option label="男" value="1"></el-option>
          <el-option label="女" value="0"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="加入日期" prop="school_id">
        <date-controls ref="datecontrols" :searchConfig="setFormConfig" @update="update" />
      </el-form-item>
      <el-form-item label="學歷" prop="education">
        <el-select v-model="fromData.education" placeholder="請選擇">
          <el-option label="所有" value="所有"></el-option>
          <el-option label="幼兒園" value="幼兒園"></el-option>
          <el-option label="小學" value="小學"></el-option>
          <el-option label="中學" value="中學"></el-option>
          <el-option label="高中" value="高中"></el-option>
          <el-option label="大學" value="大學"></el-option>
          <el-option label="研究生" value="研究生"></el-option>
          <el-option label="博士" value="博士"></el-option>
          <el-option label="博士後" value="博士後"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="導出Execl">
        <el-button @click="outExecl()">導出</el-button>
      </el-form-item>

      <ExcelFooter @rebuild="rebuild" @showPage="showPage" />
    </el-form>
    <!-- <a v-show="false" ref="exportExcel" href=""></a> -->
  </div>
 </div>
</template>

<script setup>
import {ref,reactive} from 'vue'
import {SchoolList,studentType,studentDerive} from '@/http/index.js'
import { setFormConfig } from "./index.js"
import {xlsx} from '../excel.js'
import { useRouter} from "vue-router";
const ruleFormRef = ref('')
const fromData = reactive({
        school_id: '',
        status: '',
        sex: '',
        type: '',
        education: '',
        time:''
      })
const schoolData = ref([])
const getSchool = async()=>{
    const data = await SchoolList()
    if (data.code == 200) {
        schoolData.value = data.data.data
    }
}
const categoryData = ref([])
const getCategory = async()=>{
    const data = await studentType()
    if (data.code == 200) {
        categoryData.value = data.data.data
    }
}
const outExecl = async()=>{
    const data = await studentDerive(fromData)
    let headers = ['分校','加入日期','編號','姓名(中文)','姓名(英文)','出生日期','電話','地址','電郵地址','學歷','性別','來源']
    let value = data.data.data.map(item => [item.school.name, item.create_time, item.number,item.name,item.ename,item.birthday,item.mobile,item.address,item.email,item.education,item.sex == 1 ? '男' : '女',item.source])
    xlsx(headers,value,'學生資料報表')
}
const router = useRouter();
const showPage = ()=>{
          let {href} = router.resolve({
          path: '/customer_report_print',
          query: {
           index:'studentReport',
           url:'student/derive',
           data:JSON.stringify(fromData),
          }
        })
    window.open(href,'_blank')

}
const datecontrols = ref('')
const rebuild = ()=>{
  ruleFormRef.value.resetFields()
  datecontrols.value.value = ''
  fromData.time = ''
}
const update = (e)=>{
    fromData.time = e
    console.log(e);
}
</script>

<style scoped lang='less'>
.box {
  padding: 16px 33px;
}
</style>